<template>
  <section>
    <div class="title">
      <div class="lon-lat">
        <img :src="locationIcon" alt="定位" />
        <span>
          {{
            `东经${$mapData.getplaneInfo(props.targetData.id)?.position[0].toFixed(6)} 北纬${$mapData
              .getplaneInfo(props.targetData.id)
              ?.position[1].toFixed(6)}`
          }}
        </span>
      </div>
      <div :style="{ backgroundColor: buttonTypeMap[targetInfo.level] }" class="status-type">
        {{ riskMap[targetInfo.level] }}
      </div>
    </div>

    <div class="description">
      <div>目标航速</div>
      <div>目标航向</div>
    </div>

    <div class="chart-location">
      <EChart ref="gaugeChartRef" height="180px" />
      <div>
        <img :src="luopanIcon" alt="" />
        <img
          id="zhizhenIcon"
          :src="zhizhenIcon"
          :style="{ rotate: `${$mapData.getplaneInfo(props.targetData.id)?.rotate + 24}deg` }"
          alt=""
        />
        <div>{{ $mapData.getplaneInfo(props.targetData.id)?.desiredTrack }}</div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { mapData } from '@/store/modules/mapData'

  const locationIcon = new URL('@/assets/images/layout/location.svg', import.meta.url).href
  const luopanIcon = new URL('@/assets/images/layout/luopan.png', import.meta.url).href
  const zhizhenIcon = new URL('@/assets/images/layout/zhizhen.png', import.meta.url).href

  interface Props {
    targetData: any
  }

  const props = defineProps<Props>()

  const $mapData = mapData()
  const targetInfo = $mapData.getplaneInfo(props.targetData.id)

  const gaugeChartRef = ref()

  const riskMap = {
    blue: '低风险',
    yellow: '中风险',
    red: '高风险'
  }

  const buttonTypeMap = {
    blue: '#48A8E2',
    yellow: '#FFAC00',
    red: '#FF0000'
  }

  const initGaugeChart = () => {
    const option = {
      series: [
        {
          type: 'gauge',
          min: 0,
          max: targetInfo.maxSpeed,
          axisLine: {
            lineStyle: {
              width: 10,
              color: [
                [0.3, '#67e0e3'],
                [0.7, '#37a2da'],
                [1, '#fd666d']
              ]
            }
          },
          pointer: {
            itemStyle: {
              color: 'auto'
            }
          },
          axisTick: {
            distance: -10,
            length: 4,
            lineStyle: {
              color: '#fff',
              width: 2
            }
          },
          splitLine: {
            distance: -10,
            length: 10,
            lineStyle: {
              color: '#fff',
              width: 4
            }
          },
          axisLabel: {
            color: 'inherit',
            distance: 13,
            fontSize: 12
          },
          detail: {
            valueAnimation: true,
            formatter: '{value} km/小时',
            fontSize: '14px',
            offsetCenter: [0, '110%']
          },
          data: [
            {
              value: $mapData.getplaneInfo(props.targetData.id)?.speed
            }
          ]
        }
      ]
    }

    gaugeChartRef.value.setData(option)
  }

  onMounted(() => {
    initGaugeChart()

    setInterval(() => {
      gaugeChartRef.value &&
        gaugeChartRef.value.setOption({
          series: [
            {
              data: [
                {
                  value: +$mapData.getplaneInfo(props.targetData.id)?.speed.toFixed(2)
                }
              ]
            }
          ]
        })
    }, 200)
  })
</script>

<style lang="less" scoped>
  section {
    background: linear-gradient(180deg, rgba(209, 234, 255, 0.8), #ffffff);
    border: 1px solid #ffffff;
    border-radius: 4px;
    padding: 10px;

    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;

      .lon-lat {
        img {
          width: 20px;
          height: 20px;
          margin-right: 10px;
        }

        & > span {
          font-size: 14px;
        }
      }

      .status-type {
        width: 60px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        font-size: 14px;
        border-radius: 4px;
      }
    }

    .description {
      background-color: #48a8e2;
      display: flex;
      align-items: center;
      justify-content: space-around;
      height: 35px;
      color: #fff;
    }

    .chart-location {
      display: grid;
      grid-template-rows: auto;
      grid-template-columns: 200px auto;
      align-items: center;

      & > div:nth-child(2) {
        position: relative;
        text-align: center;
        margin-top: 12px;

        & > img {
          width: 130px;
          height: 130px;
        }

        & > img:nth-child(2) {
          position: absolute;
          top: 20px;
          left: 64px;
          width: 50px;
          height: 96px;
        }

        & > div:nth-child(3) {
          font-size: 14px;
          font-weight: 600;
        }
      }
    }
  }
</style>
